Font Awesome を Next.js で利用してみた

大高大輔

2022.09.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部サービスソリューション部の大高です。

ウェブシステムでアイコンを表示させたい場合に活用できるアイコンライブリとしてFont Awesomeというライブリがあります。

このFont AwesomeをNext.jsで利用してみたので、利用方法をまとめたいと思います。

前提条件

今回試した環境は以下のとおりです。

Node.js
- 16.17.0
Next.js
- 12.2.5

また、パッケージマネージャには yarn を利用しています。

セットアップ

以下のドキュメントを参考にセットアップを行っていきます。

まずはプロジェクトに以下のようにパッケージのセットアップを行います。

# コアパッケージの導入
yarn add @fortawesome/fontawesome-svg-core

# アイコンパッケージの導入
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons

# React用コンポーネントの導入
yarn add @fortawesome/react-fontawesome@latest

これでセットアップは完了です。具体的には以下がpackage.jsonに追加されました。

(...snip...)
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
(...snip...)

Font Awesomeを利用してみる

次に、実際にページ上でアイコンを利用してみます。

利用するアイコンについては、公式サイトの「Icons」のページから検索が出来ます。

今回はFree版を利用するので、gameでキーワード検索し、更に「FEATURED > Free」で絞り込んで検索した結果から、gamepadを利用してみたいと思います。

アイコンの利用の仕方はいくつかあるようですが、今回は以下を参考にしてみました。

Add Icons with React | Font Awesome Docs

こちらを参考にして作成したページが以下になります。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGamepad } from "@fortawesome/free-solid-svg-icons";

export default function FontAwesome() {
  return (
    <div style={{ width: "100%" }}>
      <div style={{ margin: "10px", fontSize: "x-large" }}>
        <FontAwesomeIcon icon={faGamepad} />
        アイコン表示サンプル
      </div>
    </div>
  );
}

画面表示としては、以下のようになります。なお、OS設定でダークモードを設定しているのでstyles/globals.cssに従って以下のようなダークテーマで表示されています。

また、アイコンはスタイルを設定することで色を付けたり、サイズを変更することもできます。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGamepad } from "@fortawesome/free-solid-svg-icons";

export default function FontAwesome() {
  return (
    <div style={{ width: "100%" }}>
      <div style={{ margin: "10px", fontSize: "x-large" }}>
        <FontAwesomeIcon
          icon={faGamepad}
          style={{ fontSize: "xxx-large", color: "gray", marginRight: "20px" }}
        />
        アイコン表示サンプル
      </div>
    </div>
  );
}